import React, { memo } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Row, Col, Card, Tabs, DatePicker, Tooltip as AntdToopTip } from 'antd';
import numeral from 'numeral';
import moment from 'moment';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import styles from './index.less';

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

const ServiceFee = memo(
  ({
    loading,
    feeData,
    feeActiveKey,
    handlePanelChange,
    feeMonth,
    selectMonth,
    changeFeeTabPane,
    custFeeData,
    suppFeeData,
  }) => (
    <Card
      loading={loading}
      title={
        <span>
          服务费趋势
          <AntdToopTip
            title="服务费趋势：按月统计当前用户已收费账单的服务费。"
            overlayStyle={{ minWidth: 260 }}
          >
            <InfoCircleOutlined style={{ marginLeft: 5, color: 'rgba(0,0,0,.45)', fontSize: 14 }} />
          </AntdToopTip>
        </span>
      }
      extra={
        <RangePicker
          allowClear={false}
          placeholder={['开始月份', '结束月份']}
          format="YYYY-MM"
          value={feeMonth}
          // mode={['month', 'month']}
          picker="month"
          onPanelChange={handlePanelChange}
          disabledDate={current => current && current > moment().endOf('day')}
          // showTime
          onChange={dates => selectMonth(dates)}
        />
      }
    >
      <div className={styles.salesCard}>
        <Row>
          <Col xl={16} lg={12} md={12} sm={24} xs={24}>
            <div>
              <Chart
                padding={['auto', 'auto', 'auto', '10%']}
                height={400}
                data={feeData}
                scale={{
                  month: {
                    range: [0, 0.95],
                  },
                }}
                forceFit
                style={{ marginTop: 30 }}
              >
                <Legend />
                <Axis name="month" />
                <Axis
                  name="num"
                  label={{
                    formatter: val => (val && `${numeral(val).format('0,0')}元`) || 0,
                  }}
                />
                <Tooltip
                  g2-tooltip={{ backgroundColor: '#595959', color: '#fff' }}
                  crosshairs={{
                    type: 'y',
                  }}
                />
                <Geom
                  type="line"
                  position="month*num"
                  size={2}
                  color="type"
                  shape="smooth"
                  tooltip={[
                    'type*num',
                    (type, num) => ({
                      name: type,
                      value: (num && `${numeral(num).format('0,0')}元`) || 0,
                    }),
                  ]}
                />
                <Geom
                  type="point"
                  position="month*num"
                  size={4}
                  shape="circle"
                  color="type"
                  style={{
                    stroke: '#fff',
                    lineWidth: 1,
                  }}
                  tooltip={[
                    'type*num',
                    (type, num) => ({
                      name: type,
                      value: (num && `${numeral(num).format('0,0')}元`) || 0,
                    }),
                  ]}
                />
              </Chart>
            </div>
          </Col>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <div className={styles.salesRank}>
              <Tabs
                activeKey={feeActiveKey}
                tabBarStyle={{ marginBottom: 24 }}
                onChange={changeFeeTabPane}
              >
                <TabPane tab="自主开发收费排行" key="1">
                  <ul className={styles.rankingList}>
                    {(custFeeData.length &&
                      custFeeData.map((item, i) => (
                        <li key={item.custName}>
                          <span
                            className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}
                          >
                            {i + 1}
                          </span>
                          <span className={styles.rankingItemTitle} title={item.custName}>
                            {item.custName}
                          </span>
                          <span className={styles.rankingItemValue}>
                            {(item.custFee && `${numeral(item.custFee).format('0,0')}元`) || 0}
                          </span>
                        </li>
                      ))) || <li style={{ marginLeft: 40 }}>暂无数据</li>}
                  </ul>
                </TabPane>
                <TabPane tab="线下委托收费排行" key="2">
                  <ul className={styles.rankingList}>
                    {(suppFeeData.length &&
                      suppFeeData.map((item, i) => (
                        <li key={item.custName}>
                          <span
                            className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}
                          >
                            {i + 1}
                          </span>
                          <span className={styles.rankingItemTitle} title={item.custName}>
                            {item.custName}
                          </span>
                          <span className={styles.rankingItemValue}>
                            {(item.suppFee && `${numeral(item.suppFee).format('0,0')}元`) || 0}
                          </span>
                        </li>
                      ))) || <li style={{ marginLeft: 40 }}>暂无数据</li>}
                  </ul>
                </TabPane>
              </Tabs>
            </div>
          </Col>
        </Row>
      </div>
    </Card>
  )
);

export default ServiceFee;
